<template>
  <div>
    <Row :gutter="20">
      <Col span="12">
        <Card :bordered="false">
          <p slot="title">类型列表</p>
          <a href="#" slot="extra" @click.prevent="createModalType=true">
            <Icon type="md-add-circle"></Icon>
            新增
          </a>
          <Modal v-model="createModalType" draggable scrollable title="新增项目类别" :footer-hide=true @on-cancel=CancelViewType>
            <Form ref="formValidateType" :model="formValidateType" :rules="ruleValidateType" :label-width="80">
              <FormItem label="类型名称" prop="name">
                <Input v-model="formValidateType.name" placeholder="Enter your project type name"></Input>
              </FormItem>
              <FormItem label="脚本目录" prop="script_path">
                <Input v-model="formValidateType.script_path" placeholder="自定义构建脚本目录"></Input>
              </FormItem>
              <FormItem label="类型描述" prop="desc">
                <Input v-model="formValidateType.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter your type desc..."></Input>
              </FormItem>
              <FormItem>
                <Button type="success" @click="createType('formValidateType')">点击提交</Button>
                <Button type="info" @click="closeViewType('formValidateType')" style="margin-left: 8px">关闭</Button>
              </FormItem>
            </Form>
          </Modal>
          <Modal v-model="updateModalType" draggable scrollable title="新增项目类别" :footer-hide=true @on-cancel=CancelViewUpdateType>
            <Form ref="formValidateUpdateType" :model="formValidateUpdateType" :label-width="80">
              <FormItem label="类型名称" prop="name">
                <Input v-model="formValidateUpdateType.name" placeholder="Enter your project type name"></Input>
              </FormItem>
              <FormItem label="脚本目录" prop="script_path">
                <Input v-model="formValidateUpdateType.script_path" placeholder="自定义构建脚本目录"></Input>
              </FormItem>
              <FormItem label="类型描述" prop="desc">
                <Input v-model="formValidateUpdateType.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter your type desc..."></Input>
              </FormItem>
              <FormItem>
                <Button type="success" @click="updateType('formValidateUpdateType')">提交更新</Button>
                <Button type="info" @click="updateModalType=false" style="margin-left: 8px">关闭</Button>
              </FormItem>
            </Form>
          </Modal>
          <Table border :columns="type_col" :data="type_data">
            <template slot-scope="{ row }" slot="name">
              <strong>{{ row.name }}</strong>
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <Button type="info" size="small" @click="updateTypes(index)">修改</Button>
              <Button type="error" size="small" style="margin-left:10px" @click="deleteTypes(index)">删除</Button>
            </template>
          </Table>
        </Card>
      </Col>
      <Col span="12">
        <Card :bordered="false">
          <p slot="title">环境列表</p>
          <a href="#" slot="extra" @click.prevent="createModalEnvs=true">
            <Icon type="md-add-circle"></Icon>
            新增
          </a>
          <Modal v-model="createModalEnvs" draggable scrollable title="新增构建环境" :footer-hide=true @on-cancel=CancelViewEnvs>
            <Form ref="formValidateEnvs" :model="formValidateEnvs" :rules="ruleValidateEnvs" :label-width="80">
              <FormItem label="环境名称" prop="name">
                <Input v-model="formValidateEnvs.name" placeholder="Enter your project env name"></Input>
              </FormItem>
              <FormItem label="标签名称" prop="label">
                <Input v-model="formValidateEnvs.label" placeholder="Enter your env label"></Input>
              </FormItem>
              <FormItem>
                <Button type="success" @click="createEnvs('formValidateEnvs')">点击提交</Button>
                <Button type="info" @click="closeViewEnvs('formValidateEnvs')" style="margin-left: 8px">关闭</Button>
              </FormItem>
            </Form>
          </Modal>
          <Table border :columns="envs_col" :data="envs_data">
            <template slot-scope="{ row }" slot="name">
              <strong>{{ row.name }}</strong>
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <Button type="error" size="small" @click="deleteEnvs(index)">删除</Button>
            </template>
          </Table>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import { deployConfTypeCreate, deployConfTypeUpdate, deployConfTypeDetail, deployConfTypeDelete } from '@/api/deploy'
import { deployConfEnvsCreate, deployConfEnvsDetail, deployConfEnvsDelete } from '@/api/deploy'
  export default {
    data () {
      return {
        createModalType: false,
        updateModalType: false,
        createModalEnvs: false,
        updateTypeId: '',
        formValidateType: {
          name: '',
          script_path: '',
          desc: ''
        },
        formValidateUpdateType: {
          name: '',
          script_path: '',
          desc: ''
        },
        ruleValidateType: {
          name: [
            { required: true, message: 'The name cannot be empty', trigger: 'blur' }
          ],
        },
        formValidateEnvs: {
          name: '',
          label: ''
        },
        ruleValidateEnvs: {
          name: [
            { required: true, message: 'The name cannot be empty', trigger: 'blur' }
          ],
          label: [
            { required: true, message: 'The label cannot be empty', trigger: 'blur' }
          ],
        },
        type_col: [
          {
            title: '语言类型',
            key: 'name',
            width: 100
          },
          {
            title: '脚本目录',
            key: 'script_path'
          },
          {
            title: '描述',
            key: 'desc'
          },
          {
            title: '更新日期',
            key: 'update_time'
          },
          {
            title: '操作',
            slot: 'action',
            width: 150,
            align: 'center'
          }
        ],
        envs_col: [
          {
            title: '环境名称',
            key: 'name'
          },
          {
            title: '标签',
            key: 'label'
          },
          {
            title: '创建日期',
            key: 'create_time'
          },
          {
            title: '更新日期',
            key: 'update_time'
          },
          {
            title: '操作',
            slot: 'action',
            width: 120,
            align: 'center'
          }
        ],
        type_data: [],
        envs_data: [],
        permission: '',
      }
    },
    created () {
      this.get_permission();
      this.detailType();
      this.detailEnvs();
    },
    methods: {
      // 获取用户操作权限
      get_permission () {
        const auth = JSON.parse(sessionStorage.getItem('permission'))
        this.permission = auth.child
      },
      createType (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            // 请求后端接口创建数据
            deployConfTypeCreate(this.formValidateType).then(res => {
              // this.data_list()  //在创建新地址时再次请求数据
              this.$Message.success({content:'创建成功!',duration: 5,closable: true});
              this.detailType()
            }).catch( err => {
              this.$Message.error({content:'创建失败!',duration: 5,closable: true})
            })
          }
        })
      },
      closeViewType (name) {
        this.createModalType = false
        this.$refs[name].resetFields();
      },
      updateType (name) {
        deployConfTypeUpdate (this.updateTypeId, this.formValidateUpdateType).then(res => {
          // console.log(res)
          this.$Message.success("更新成功")
        }).catch(err => {
          // console.log(err)
          this.$Message.error("更新失败")
        })
      },
      closeViewUpdateType (name) {
        this.updateModalType = false
        this.$refs[name].resetFields();
      },
      CancelViewType() {
        this.$refs['formValidateType'].resetFields();
      },
      CancelViewUpdateType () {
        this.$refs['formValidateUpdateType'].resetFields();
      },
      detailType () {
        deployConfTypeDetail().then(res => {
          this.type_data = res.data.results
        })
        .catch(err => {
          this.$Message.error("获取列表数据失败!")
        })
      },
      // 修改信息
      updateTypes(index) {
        this.updateModalType = true
        this.formValidateUpdateType = this.type_data[index]
        this.updateTypeId = this.type_data[index].id
      },
      // 删除
      deleteTypes (index) {
        this.$Modal.confirm({
          title: "警告!",
          content: `<p>确认删除该类型${this.type_data[index].name}？</p>`,
          onOk: () => {
            deployConfTypeDelete(this.type_data[index].id).then(res => {
              this.type_data.splice(index, 1);
              this.$Message.success({content:'删除成功!',duration: 5,closable: true})
            }).catch(err => {
              this.$Message.error({content:'删除失败!',duration: 5,closable: true})
            })
            },
          onCancel: () => {
            this.$Message.info('已取消删除');
          }
        })
      },
      createEnvs (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            // 请求后端接口创建数据
            deployConfEnvsCreate(this.formValidateEnvs).then(res => {
              // this.data_list()  //在创建新地址时再次请求数据
              this.$Message.success({content:'创建成功!',duration: 5,closable: true});
              this.detailEnvs()
            }).catch( err => {
              this.$Message.error({content:'创建失败!',duration: 5,closable: true})
            })
          }
        })
      },
      closeViewEnvs (name) {
        this.createModalEnvs = false
        this.$refs[name].resetFields();
      },
      CancelViewEnvs () {
        this.$refs['formValidateEnvs'].resetFields();
      },
      detailEnvs () {
        deployConfEnvsDetail().then(res => {
          this.envs_data = res.data.results
        })
        .catch(err => {
          this.$Message.error("获取列表数据失败!")
        })
      },
      // 删除
      deleteEnvs (index) {
        this.$Modal.confirm({
          title: "警告!",
          content: `<p>确认删除该类型${this.envs_data[index].name}？</p>`,
          onOk: () => {
            deployConfEnvsDelete(this.envs_data[index].id).then(res => {
              this.envs_data.splice(index, 1);
              this.$Message.success({content:'删除成功!',duration: 5,closable: true})
            }).catch(err => {
              this.$Message.error({content:'删除失败!',duration: 5,closable: true})
            })
            },
          onCancel: () => {
            this.$Message.info('已取消删除');
          }
        })
      }
    }
  }
</script>